
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Macro Pattern</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script src="./macro.js"></script>
		<style>
			html, body { width:100%; height:100%; margin:0; padding:0; }
		
			#canvas {
				width:100%;
				height:100%;
				display:block;
			}
			
			h2 { 
				color:#0093D0;
				margin-left:20px;
			}
		
			.box { 
				background-color:#fff;
				border:1px solid red;
				display:block;
				position:absolute;
				left:10px;
				top:110px;
				width:100px;
				height:100px;
			}
			
			#test {
				position:absolute;
				right:0;
				top:0;
				width:500px;
				height:100%;
			}
			
			#test textarea{
				width:100%;
				height:100%;
			}
		</style>
	</head>
<body>
<h2>Javascript Macro Command Pattern</h2>
<div id="canvas">
	<div class="box">.box</div>
</div>

<div id="test">
<input type="button" id="execute_button" value="execute" />
<input type="button" id="stop_button" value="stop" />
<input type="button" id="download_button" value="download" />
<textarea id="script">


var $box = $(".box");

_macro.bindCommand( "left_animation", function( time) {
	$box.animate({
		left:parseInt($box.css("left"))+100
	}, time, function() {
		_macro.complete( "left_animation" );
	});
});

_macro.bindCommand( "top_animation", function( time) {
	$box.animate({
		top:parseInt($box.css("top"))+100
	}, time,function() {
		_macro.complete( "top_animation" );
	} );
});

_macro.bindCommand( "small_size", function( time) {
	$box.animate({
		width:50,
		height:50
	}, time,function() {
		_macro.complete( "small_size" );
	} );
});

_macro.bindCommand( "big_size", function( time) {
	$box.animate({
		width:150,
		height:150
	}, time,function() {
		_macro.complete( "big_size" );
	} );
});

_macro.bindCommand( "normal_size", function( time) {
	$box.animate({
		width:100,
		height:100
	}, time,function() {
		_macro.complete( "normal_size" );
	} );
});

_macro.bindCommand( "init", function( time) {
	$box.animate({
		width:100,
		height:100,
		left:10,
		top:110
	}, time,function() {
		_macro.complete( "init" );
	} );
});

_macro.bindCommand( "doridori", function() {
	var __macro = new Macro();
	__macro.bindCommand( "xOffset", function( leftOffset, time ) {
		$box.animate({
			left:parseInt($box.css("left"))+leftOffset
		}, time,function() {
			__macro.complete( "xOffset" );
		} );
	});
	
	__macro.bindCommand( "yOffset", function( topOffset, time ) {
		$box.animate({
			top:parseInt($box.css("top"))+topOffset
		}, time,function() {
			__macro.complete( "yOffset" );
		} );
	});
	
	__macro.addMacro( "xOffset", -10, 100 );
	__macro.addMacro( "xOffset", +20, 100 );
	__macro.addMacro( "xOffset", -20, 100 );
	__macro.addMacro( "xOffset", +10, 100 );
	__macro.addExecuteMacro( function() {
		_macro.complete("doridori" );
	});
	
	__macro.startMacro();
});

function loopMacro() {

	_macro.clearMacro();
		
	_macro.addMacro( "left_animation", 300 );
	_macro.addMacro( "top_animation", 200 );
	_macro.addMacro( "big_size", 100 );
	_macro.addMacro( "left_animation", 500 );

	_macro.addMacro( "doridori" );
	
	_macro.addMacro( "top_animation", 300 );
	_macro.delay( 500  );
	_macro.addMacro( "small_size", 100 );
	
	_macro.addMacro( "doridori" );
	
	_macro.addMacro( "small_size", 100 );
	_macro.addMacro( "left_animation", 300 );
	_macro.addMacro( "normal_size", 400 );
	
	_macro.addMacro( "doridori" );
	
	_macro.addMacro( "init", 400 );
	_macro.addExecuteMacro( function() {
		_macro.execute( "loop_macro" );
	} );
	_macro.startMacro();
};

_macro.bindCommand( "loop_macro",  loopMacro );

_macro.execute( "loop_macro" );


</textarea>
</div>

<script type="text/javascript">
<!--//

var _macro = new Macro();

$stopButton = $("#stop_button");
$executeButton = $("#execute_button");
$downloadButton = $("#download_button");
$script = $("#script");

$stopButton.click( function() {
	_macro.execute("init");
	_macro.clearMacro();
});

$executeButton.click( function() { 
	var script = $script.val();
	eval(script);
});

$downloadButton.click( function() {
	location.href = "macro.tar";
});


//-->
</script>
</body>
</html>
